<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="站内信详情"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top"></div>

    <div class="bg-white pd-30">
      <van-skeleton v-if="!show" title :row="5" />
      <div v-if="show">
        <h2 class="fs-42 fw-700">{{info.Title}}</h2>
        <p class="color-gray-light">{{info.AddTime}}</p>
        <div class="ptb-30" v-html="info.Content"></div>
        <p
          class="color-gray-light pb-30"
          style="border-bottom:1px solid #f5f5f5;"
        >阅读：{{info.ReadCount}}</p>
        <div class="mt-10">
          <router-link v-if="info.PreId" :to="{path:'/home/messageInfo/' + info.PreId}" replace>
            <p class="color-link toe ptb-20">上一篇：{{info.PreTitle}}</p>
          </router-link>
          <router-link v-if="info.NextId" :to="{path:'/home/messageInfo/' + info.NextId}" replace>
            <p class="color-link toe ptb-20">下一篇：{{info.NextTitle}}</p>
          </router-link>
          <!-- <van-cell
            v-if="info.PreId"
            title="上一篇"
            :to="{path:'/home/messageInfo/' + info.PreId}"
            replace
            is-link
          >
            <p class="toe" slot="default">{{info.PreTitle}}</p>
          </van-cell>
          <van-cell
            v-if="info.NextId"
            title="下一篇"
            :value="info.NextTitle"
            :to="{path:'/home/messageInfo/' + info.NextId}"
            replace
            is-link
          />-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from 'api/siteMessage'
export default {
  data() {
    return {
      show: false,
      info: {}
    }
  },
  methods: {
    // 根据id获取站内信详情
    getInfo(id) {
      getInfo(id).then(res => {
        //console.log(res);
        if (res) {
          this.info = res.Data
          this.show = true
        }
      })
    }
  },
  watch: {
    $route(to, from) {
      this.show = false
      this.getInfo(to.params.id)
    }
  },
  created() {
    this.getInfo(this.$route.params.id)
  }
}
</script>

<style lang="scss" scoped>
</style>
